<template>
    <el-card style="width:500px;margin-bottom: 10px;">
        <template #header>
            <div class="card-header" :class="{ done: item.isDone }">
                <span>{{ item.title }}</span>
                <div>
                    <el-button type="text" @click="$emit('delete', item.id)">删除</el-button>
                    <el-button type="text" v-if="!item.isDone" @click="$emit('done', item.id)">完成</el-button>
                </div>
            </div>
        </template>
        <div style="text-align: right;">{{ createTime }}</div>
    </el-card>
</template>

<script lang="ts">
import { ElCard, ElButton } from 'element-plus';
import { TodoType } from '@/utils/types';
import { computed, defineComponent, PropType } from 'vue';
import dayjs from 'dayjs';

export default defineComponent({
    name: 'TodoItem',
    components: {
        ElCard,
        ElButton,
    },
    props: {
        item: {
            type: Object as PropType<TodoType>,
            required: true,
        },
    },
    setup(props, ctx) {
        const createTime = computed(() => dayjs(props.item.createTime).format('YYYY-MM-DD HH:mm'));
        return {
            createTime,
        };
    },
});
</script>

<style lang="scss" scoped>
.done {
    color: #ccc;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
